import React, { Component } from 'react';
import '../styles/Category.scss'

//集体导入并重命名
import * as service from '../api/index'
// import { category_list, category_subcate } from '../api'

class Category extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0,
            list: [],
            subcate: {}
        }
    }
    componentDidMount() {
        service.category_list().then((res) => {
            this.setState({
                list: res.data.list
            })
             //请求第一个一级分类对应的二三级分类
            service.category_subcate({ id: res.data.list[0].id }).then((res) => {
                this.setState({
                    subcate: res.data.subcate
                })
            })
        })

    }

    handelClick(index, id) {
        service.category_subcate({ id }).then((res) => {
            console.log(res.data.subcate);
            this.setState({
                subcate: res.data.subcate
            })
        })
        // console.log(index);
        this.setState({
            currentIndex: index
        })
    }
    toAllGood(id) { 
     //跳路由 到所有商品页,并且携带三级分类id
        this.props.history.push({pathname:'/index/allgoods',state:{id}})
    }
    
    render() {
        return (
            <div className='cate-first'>
                {/* 一级分类 */}
                <div className='left'>
                    {
                        this.state.list.map((item1, index) => {
                            return (
                                <div className={`btn ${this.state.currentIndex === index ? 'active' : ''}`} key={index} onClick={() => { this.handelClick(index, item1.id) }}>{item1.name}</div>
                                // <div className='btn' key={index} >{item.name}</div>
                            )
                        })
                    }
                </div>
                <div className="right">
                    {/* 二级分类 */}
                    {
                        this.state.subcate.subcategory &&
                        this.state.subcate.subcategory.map((item2, index) => {
                            return (
                                <div className='box' key={index}>
                                    <h3>{item2.name}</h3>
                                    {/* 三级分类 */}
                                    <div className="list">
                                        {
                                            item2.subNavs.map((item3, index) => {
                                                return (
                                                    <div className='cate-pro' onClick={()=>{this.toAllGood(item3.id)}}>
                                                        <img src={item3.pic} />
                                                        <div className='proname'>{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Category;